<!DOCTYPE html>

<html lang="zh-CN">

<head>
  
  <title>SpringMVC接收页面表单参数 - lingqu&#39;blog</title>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
  
  

  <link rel="shortcut icon" href="/favicon.ico" type="image/png" />
  <meta name="description" content="几个简单的Spring mvc页面表单提交获取数据后台接收参数实现    转：http:&#x2F;&#x2F;www.cnblogs.com&#x2F;luxh&#x2F;archive&#x2F;2013&#x2F;03&#x2F;14&#x2F;2960152.html">
<meta property="og:type" content="article">
<meta property="og:title" content="SpringMVC接收页面表单参数">
<meta property="og:url" content="https://lingqu.github.io/2021/08/19/SpringMVC%E6%8E%A5%E6%94%B6%E9%A1%B5%E9%9D%A2%E8%A1%A8%E5%8D%95%E5%8F%82%E6%95%B0/index.html">
<meta property="og:site_name" content="lingqu&#39;blog">
<meta property="og:description" content="几个简单的Spring mvc页面表单提交获取数据后台接收参数实现    转：http:&#x2F;&#x2F;www.cnblogs.com&#x2F;luxh&#x2F;archive&#x2F;2013&#x2F;03&#x2F;14&#x2F;2960152.html">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-08-19T03:45:58.000Z">
<meta property="article:modified_time" content="2021-08-19T03:48:52.304Z">
<meta property="article:author" content="lingqu">
<meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/highlight.js@9.15.8/styles/atom-one-dark.css,npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.min.css,gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css,npm/hexo-theme-nexmoe@latest/source/lib/mdui_043tiny/css/mdui.css,npm/hexo-theme-nexmoe@latest/source/lib/iconfont/iconfont.css?v=233" crossorigin>
  <link rel="stylesheet" href="/css/style.css?v=1629344957169">
  
  <link rel="stylesheet" href="/css/style.css?v=1629344957169">
  <link rel="stylesheet" href="/lib/iconfont/iconfont.css?v=1629344957169">
<meta name="generator" content="Hexo 5.4.0"></head>

<body class="mdui-drawer-body-left">
  
  <div id="nexmoe-background">
    <div class="nexmoe-bg" style="background-image: url(http://pic1.win4000.com/wallpaper/f/5922779a761cd.jpg)"></div>
    <div class="mdui-appbar mdui-shadow-0">
      <div class="mdui-toolbar">
        <a mdui-drawer="{target: '#drawer', swipe: true}" title="menu" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon nexmoefont icon-menu"></i></a>
        <div class="mdui-toolbar-spacer"></div>
        <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>-->
        <a href="/" title="lingqu" class="mdui-btn mdui-btn-icon"><img src="https://inews.gtimg.com/newsapp_bt/0/13492515314/1000" alt="lingqu"></a>
       </div>
    </div>
  </div>
  <div id="nexmoe-header">
      <div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/" title="lingqu">
            <img src="https://inews.gtimg.com/newsapp_bt/0/13492515314/1000" alt="lingqu" alt="lingqu">
        </a>
    </div>
    <div class="nexmoe-count">
        <div><span>文章</span>8</div>
        <div><span>标签</span>3</div>
        <div><span>分类</span>0</div>
    </div>
    <div class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/" title="回到首页">
            <i class="mdui-list-item-icon nexmoefont icon-home"></i>
            <div class="mdui-list-item-content">
                回到首页
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/about.html" title="关于博客">
            <i class="mdui-list-item-icon nexmoefont icon-info-circle"></i>
            <div class="mdui-list-item-content">
                关于博客
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/PY.html" title="我的朋友">
            <i class="mdui-list-item-icon nexmoefont icon-unorderedlist"></i>
            <div class="mdui-list-item-content">
                我的朋友
            </div>
        </a>
        
    </div>
    <aside id="nexmoe-sidebar">
  
  <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-search">
        <form id="search_form" action_e="https://cn.bing.com/search?q=site:nexmoe.com" onsubmit="return search();">
            <label><input id="search_value" name="q" type="search" placeholder="搜索"></label>
        </form>
    </div>
</div>
  
  <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-social">
        <a class="mdui-ripple" href="https://jq.qq.com/?_wv=1027&k=5CfKHun" target="_blank" mdui-tooltip="{content: 'QQ群'}" style="color: rgb(249, 174, 8);background-color: rgba(249, 174, 8, .1);">
            <i class="nexmoefont icon-QQ"></i>
        </a><a class="mdui-ripple" href="https://space.bilibili.com/51207190" target="_blank" mdui-tooltip="{content: '哔哩哔哩'}" style="color: rgb(231, 106, 141);background-color: rgba(231, 106, 141, .15);">
            <i class="nexmoefont icon-bilibili"></i>
        </a><a class="mdui-ripple" href="https://github.com/lingqu/" target="_blank" mdui-tooltip="{content: 'GitHub'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-github"></i>
        </a>
    </div>
</div>
  
  

  
  
  <div class="nexmoe-widget-wrap">
    <div id="randomtagcloud" class="nexmoe-widget tagcloud nexmoe-rainbow">
      <a href="/tags/C/" style="font-size: 20px;">C++</a> <a href="/tags/JavaScript/" style="font-size: 10px;">JavaScript</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" style="font-size: 20px;">数据结构</a>
    </div>
    
  </div>

  
</aside>
    <div class="nexmoe-copyright">
        &copy; 2021 lingqu
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://github.com/theme-nexmoe/hexo-theme-nexmoe" target="_blank">Nexmoe</a>
        
    </div>
</div><!-- .nexmoe-drawer -->
  </div>
  <div id="nexmoe-content">
    <div class="nexmoe-primary">
        <div class="nexmoe-post">

  <article>
    
        <div class="nexmoe-post-cover" style="padding-bottom: 45.83333333333333%;"> 
            <img data-src="http://pic1.win4000.com/wallpaper/f/5922779a761cd.jpg" data-sizes="auto" alt="SpringMVC接收页面表单参数" class="lazyload">
            <h1>SpringMVC接收页面表单参数</h1>
        </div>
    
    
    <div class="nexmoe-post-meta nexmoe-rainbow" style="margin:10px 0!important;">
    <a><i class="nexmoefont icon-calendar-fill"></i>2021年08月19日</a>
    <a><i class="nexmoefont icon-areachart"></i>709 字</a>
    <a><i class="nexmoefont icon-time-circle-fill"></i>大概 4 分钟</a>
</div>

    

    <p>   几个简单的Spring mvc页面表单提交获取数据后台接收参数实现</p>
<p>   转：<a target="_blank" rel="noopener" href="http://www.cnblogs.com/luxh/archive/2013/03/14/2960152.html">http://www.cnblogs.com/luxh/archive/2013/03/14/2960152.html</a></p>
<span id="more"></span>

<h2 id="1、直接把表单的参数写在Controller相应的方法的形参中"><a href="#1、直接把表单的参数写在Controller相应的方法的形参中" class="headerlink" title="1、直接把表单的参数写在Controller相应的方法的形参中"></a>1、直接把表单的参数写在Controller相应的方法的形参中</h2><pre><code class="java">
@RequestMapping(&quot;/addUser1&quot;)
    public String addUser1(String userName,String password) &#123;
        System.out.println(&quot;userName is:&quot;+userName);
        System.out.println(&quot;password is:&quot;+password);
        return &quot;/user/success&quot;;
    &#125;
</code></pre>
<h2 id="2、通过HttpServletRequest接收"><a href="#2、通过HttpServletRequest接收" class="headerlink" title="2、通过HttpServletRequest接收"></a>2、通过HttpServletRequest接收</h2><pre><code class="java">
@RequestMapping(&quot;/addUser2&quot;)
    public String addUser2(HttpServletRequest request) &#123;
        String userName = request.getParameter(&quot;userName&quot;);
        String password = request.getParameter(&quot;password&quot;);
        System.out.println(&quot;userName is:&quot;+userName);
        System.out.println(&quot;password is:&quot;+password);
        return &quot;/user/success&quot;;
    &#125;
</code></pre>
<h2 id="3、通过一个bean来接收"><a href="#3、通过一个bean来接收" class="headerlink" title="3、通过一个bean来接收"></a>3、通过一个bean来接收</h2><h4 id="1）建立一个和表单中参数对应的bean"><a href="#1）建立一个和表单中参数对应的bean" class="headerlink" title="1）建立一个和表单中参数对应的bean"></a>1）建立一个和表单中参数对应的bean</h4><pre><code class="java">
public class User &#123;
    
    private String userName;
    
    private String password;
 
    //省略了get和set方法也可以用@Data
&#125;
</code></pre>
<h4 id="2）用这个bean来封装接收的参数"><a href="#2）用这个bean来封装接收的参数" class="headerlink" title="2）用这个bean来封装接收的参数"></a>2）用这个bean来封装接收的参数</h4><pre><code class="JAVA">    
@RequestMapping(&quot;/addUser3&quot;)
    public String addUser3(User user) &#123;
        System.out.println(&quot;userName is:&quot;+user.getUserName());
        System.out.println(&quot;password is:&quot;+user.getPassword());
        return &quot;/user/success&quot;;
    &#125;
</code></pre>
<h2 id="4、通过json数据接收"><a href="#4、通过json数据接收" class="headerlink" title="4、通过json数据接收"></a>4、通过json数据接收</h2><pre><code class="json">&lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot;
    pageEncoding=&quot;UTF-8&quot;%&gt;
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
&lt;title&gt;Add User&lt;/title&gt;
 
&lt;script type=&quot;text/javascript&quot; src=&quot;$&#123;pageContext.request.contextPath&#125;/resource/script/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function()&#123;
        $(&quot;#button_submit&quot;).click(function()&#123;
            var name = $(&quot;#userName&quot;).val();
            var pass = $(&quot;#password&quot;).val();
            
 
            var user = &#123;userName:name,password:pass&#125;;//拼装成json格式
            
            $.ajax(&#123;
                type:&quot;POST&quot;,
                url:&quot;$&#123;pageContext.request.contextPath&#125;/user/addUser4&quot;,
                data:user,
                success:function(data)&#123;
                    alert(&quot;成功&quot;);
                &#125;,
                error:function(e) &#123;
                    alert(&quot;出错：&quot;+e);
                &#125;
            &#125;);
        &#125;);
    &#125;);
&lt;/script&gt;
 
&lt;/head&gt;
&lt;body&gt;
    &lt;form&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;td&gt;账号&lt;/td&gt;
                &lt;td&gt;
                    &lt;input type=&quot;text&quot; id=&quot;userName&quot; name=&quot;userName&quot;&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;密码&lt;/td&gt;
                &lt;td&gt;
                    &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot;&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt; &lt;/td&gt;
                &lt;td&gt;
                    &lt;input type=&quot;button&quot; id=&quot;button_submit&quot; value=&quot;提交&quot;&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h4 id="依然可以使用bean来接收json数据"><a href="#依然可以使用bean来接收json数据" class="headerlink" title="依然可以使用bean来接收json数据"></a>依然可以使用bean来接收json数据</h4><pre><code class="java">
@RequestMapping(&quot;/addUser4&quot;)
    public String addUser4(User user) &#123;
        System.out.println(&quot;userName is:&quot;+user.getUserName());
        System.out.println(&quot;password is:&quot;+user.getPassword());
        return &quot;/user/success&quot;;
    &#125;
</code></pre>
<h2 id="5、使用jQuery的serializeArray-方法序列化表单元素"><a href="#5、使用jQuery的serializeArray-方法序列化表单元素" class="headerlink" title="5、使用jQuery的serializeArray() 方法序列化表单元素"></a>5、使用jQuery的serializeArray() 方法序列化表单元素</h2><pre><code>        如果表单元素很多，手工拼装成json数据非常麻烦，可以使用jQuery提供的serializeArray()方法序列化表单元素，返回json数据结构数据。
</code></pre>
<pre><code class="json">&lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot;
    pageEncoding=&quot;UTF-8&quot;%&gt;
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
&lt;title&gt;Add User&lt;/title&gt;
 
&lt;script type=&quot;text/javascript&quot; src=&quot;$&#123;pageContext.request.contextPath&#125;/resource/script/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function()&#123;
        $(&quot;#button_submit&quot;).click(function()&#123;
            
            //序列化表单元素，返回json数据
            var params = $(&quot;#userForm&quot;).serializeArray();
            
            //也可以把表单之外的元素按照name value的格式存进来
            //params.push(&#123;name:&quot;hello&quot;,value:&quot;man&quot;&#125;);
            
            $.ajax(&#123;
                type:&quot;POST&quot;,
                url:&quot;$&#123;pageContext.request.contextPath&#125;/user/addUser5&quot;,
                data:params,
                success:function(data)&#123;
                    alert(&quot;成功&quot;);
                &#125;,
                error:function(e) &#123;
                    alert(&quot;出错：&quot;+e);
                &#125;
            &#125;);
        &#125;);
    &#125;);
&lt;/script&gt;
 
&lt;/head&gt;
&lt;body&gt;
    &lt;form id=&quot;userForm&quot;&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;td&gt;账号&lt;/td&gt;
                &lt;td&gt;
                    &lt;input type=&quot;text&quot; id=&quot;userName&quot; name=&quot;userName&quot;&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;密码&lt;/td&gt;
                &lt;td&gt;
                    &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot;&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt; &lt;/td&gt;
                &lt;td&gt;
                    &lt;input type=&quot;button&quot; id=&quot;button_submit&quot; value=&quot;提交&quot;&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h4 id="依然可以使用bean来接收json数据："><a href="#依然可以使用bean来接收json数据：" class="headerlink" title="依然可以使用bean来接收json数据："></a>依然可以使用bean来接收json数据：</h4><pre><code class="java">@RequestMapping(&quot;/addUser5&quot;)
    public String addUser5(User user) &#123;
        System.out.println(&quot;userName is:&quot;+user.getUserName());
        System.out.println(&quot;password is:&quot;+user.getPassword());
        return &quot;/user/success&quot;;
    &#125;
</code></pre>

  </article>

  
    
  <div class="nexmoe-post-copyright">
    <strong>本文作者：</strong>lingqu<br>
    <strong>本文链接：</strong><a href="https://lingqu.github.io/2021/08/19/SpringMVC%E6%8E%A5%E6%94%B6%E9%A1%B5%E9%9D%A2%E8%A1%A8%E5%8D%95%E5%8F%82%E6%95%B0/" title="https:&#x2F;&#x2F;lingqu.github.io&#x2F;2021&#x2F;08&#x2F;19&#x2F;SpringMVC%E6%8E%A5%E6%94%B6%E9%A1%B5%E9%9D%A2%E8%A1%A8%E5%8D%95%E5%8F%82%E6%95%B0&#x2F;" target="_blank" rel="noopener">https:&#x2F;&#x2F;lingqu.github.io&#x2F;2021&#x2F;08&#x2F;19&#x2F;SpringMVC%E6%8E%A5%E6%94%B6%E9%A1%B5%E9%9D%A2%E8%A1%A8%E5%8D%95%E5%8F%82%E6%95%B0&#x2F;</a><br>
    
      <strong>版权声明：</strong>本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/cn/deed.zh" target="_blank">CC BY-NC-SA 3.0 CN</a> 协议进行许可
    
  </div>


  
  
  <div class="nexmoe-post-meta nexmoe-rainbow">
    
    
</div>

  <div class="nexmoe-post-footer">
    <section class="nexmoe-comment">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.min.css">
<div id="gitalk"></div>
<script src="https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.min.js"></script>
<script type="text/javascript">
    var gitalk = new Gitalk({
        clientID: '80b2453b6d5f37ad6225',
        clientSecret: '43e99fa852795c9a7b3eb924b2558c64b84bbdeb',
        id: window.location.pathname,
        repo: 'nexmoe.github.io',
        owner: 'nexmoe',
        admin: 'nexmoe'
    })
    gitalk.render('gitalk')
</script>
</section>
  </div>
</div>
        <div class="nexmoe-post-right">
          <div class="nexmoe-fixed">
            <div class="nexmoe-tool"> 
              
                
              
              <a href="#nexmoe-content" class="toc-link" aria-label="回到顶部" title="top"><button class="mdui-fab mdui-ripple"><i class="nexmoefont icon-caret-top"></i></button></a>
            </div>
          </div>
        </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/combine/npm/lazysizes@5.1.0/lazysizes.min.js,gh/highlightjs/cdn-release@9.15.8/build/highlight.min.js,npm/mdui@0.4.3/dist/js/mdui.min.js?v=1"></script>
<script>
	hljs.initHighlightingOnLoad();
</script>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>


<script src="https://cdn.jsdelivr.net/gh/xtaodada/xtaodada.github.io@0.0.2/copy.js"></script>
 

<script src="/js/app.js?v=1629344957170"></script>

<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js"></script>
<script>
	$(".justified-gallery").justifiedGallery({
		rowHeight: 160,
		margins: 10,
	});
</script>

  





</body>

</html>
